<script setup>
import {obj2Array} from "@/utils/index.js";
import {ICONS} from "@/common/constant.js";

const value = defineModel('value')
const props = defineProps(
    {
      disabled: {
        type: Boolean,
        default: false
      }
    }
)

const show = ref(false)

const onIconClick = (icon) => {
  value.value = icon
  show.value = false
}
</script>

<template>
  <n-button @click="show = true" :disabled="props.disabled">
    <n-icon v-if="value" :component="ICONS[value]"/>
    <n-text v-else>选择图标</n-text>
  </n-button>
  <n-drawer v-model:show="show" width="320">
    <n-drawer-content title="选择图标">
      <n-grid x-gap="10" :cols="5" y-gap="10">
        <n-gi v-for="icon in obj2Array(ICONS)">
          <n-button circle @click="onIconClick(icon.key)" :disabled="props.disabled">
            <template #icon>
              <n-icon :component="icon.value"/>
            </template>
          </n-button>
        </n-gi>
      </n-grid>
    </n-drawer-content>
  </n-drawer>
</template>

<style scoped>

</style>